<template>
  <div class="padding-20 flex">
    <el-menu class="report-menu" :default-active="defaultActive" :default-openeds="defaultOpeneds">
      <menu-tree :menuData="treeData"></menu-tree>
    </el-menu>

    <div class="flex-1 padding-left-20 padding-top-10 fill-box">
      <component :is="tablePanel"></component>
    </div>
  </div>
</template>

<script>
  import Bus from '@js/bus.js';
  import MenuTree from '../components/menuTree';
  const loadComponent = value => import(`./modules/${value}`);

  export default {
    components: { MenuTree },

    data() {
      return {
        tablePanel: null, //动态组件实例
        activePage: '', //动态组件名字
        defaultActive: '',
        defaultOpeneds: [],
        treeData: [
          {
            name: '基础报表',
            primaryKey: '618861221752655872',
            level: 1,
            children: [
              {
                primaryKey: '618862218541731840',
                name: '资产台账表',
                level: 2,
                menuUrl: 'assetStandingBook',
              },
            ],
          },
          {
            name: '财务报表',
            primaryKey: '618861417534377984',
            level: 1,
            children: [
              {
                primaryKey: '618862539997384704',
                name: '月度收入明细表(权责)',
                level: 2,
                menuUrl: 'detailMonthDuty',
              },
              {
                primaryKey: '618862763910156288',
                name: '物业费统计表(权责)',
                level: 2,
                menuUrl: 'propertyFeeDuty',
              },
              {
                primaryKey: '618862904658415616',
                name: '月度收入明细表(收付)',
                level: 2,
                menuUrl: 'detailMonthGather',
              },
            ],
          },
          {
            name: '业务报表',
            primaryKey: '618861614704414720',
            level: 1,
          },
          {
            name: '其他报表',
            primaryKey: '618861724960231424',
            level: 1,
          },
        ],
      };
    },

    methods: {
      init() {
        if (this.treeData.length > 0) {
          let levelOneFirstItem = this.treeData[0];
          this.defaultOpeneds = [levelOneFirstItem.primaryKey];
          if (levelOneFirstItem.children && levelOneFirstItem.children.length > 0) {
            this.defaultActive = levelOneFirstItem.children[0].primaryKey;
            this.setComponent(levelOneFirstItem.children[0].menuUrl);
          }
        }
      },

      //接受兄弟传值 实例动态组件
      initBus() {
        Bus.$on('menuData', async data => {
          if (!data.menuUrl || this.activePage == data.menuUrl) return;
          this.setComponent(data.menuUrl);
        });
      },

      //赋值组件实例
      setComponent(name) {
        this.activePage = name;
        loadComponent(name).then(component => {
          this.tablePanel = component.default;
        });
      },
    },

    created() {
      this.initBus();
    },

    mounted() {
      this.init();
    },
  };
</script>

<style lang="scss" scoped>
  .report-menu {
    min-height: calc(100vh - 100px);
    width: 250px;
  }
</style>
